<template>
  <view class="order-appeal-page page-content">
    <z-paging ref="paging" v-model="currentList" @query="queryList" :auto="false" :refresher-enabled="true"
      :loading-more-enabled="true" empty-view-text="暂无数据">
      <template #top>
        <up-navbar title="订单申诉列表" :autoBack="false" :fixed="true" bgColor="transparent" :border="false" placeholder
          @click="handleBackClick">
          <template>
            <view></view>
          </template>
        </up-navbar>

        <up-sticky class="padding-20" bgColor="transparent">
          <view class="search-bar">
            <view class="search-bar-item" @click="showPicker1 = true">
              <text class="title">区域</text>
              <up-icon name="arrow-down"></up-icon>
            </view>
            <view class="search-bar-item" @click="showPicker2 = true">
              <text class="title">停车场</text>
              <up-icon name="arrow-down"></up-icon>
            </view>
            <view class="search-bar-item" @click="showPicker3 = true">
              <text class="title">是否本人</text>
              <up-icon name="arrow-down"></up-icon>
            </view>
            <up-picker :show="showPicker1" :columns="columns1" :closeOnClickOverlay="true" @confirm="handleAreaConfirm"
              @cancel="showPicker1 = false" @close="showPicker1 = false"></up-picker>
            <up-picker :show="showPicker2" :columns="columns2" :closeOnClickOverlay="true" @confirm="handleVenueConfirm"
              @cancel="showPicker2 = false" @close="showPicker2 = false"></up-picker>
            <up-picker :show="showPicker3" :columns="columns3" :closeOnClickOverlay="true" @confirm="handleIsOwnConfirm"
              @cancel="showPicker3 = false" @close="showPicker3 = false"></up-picker>
          </view>

          <up-search v-model="searchValue" :clearabled="true" :showAction="false" placeholder="请输入车牌号"
            @search="handleSearch"></up-search>
          <up-tabs :list="tabsList" :scrollable="false" @change="handleTabChange"></up-tabs>
        </up-sticky>
      </template>

      <view class="vehicle-verify-list">
        <view class="list-item-card" v-for="(item, index) in currentList" :key="index">
          <view class="card-header">
            <view class="title">
              车牌号：<text class="number">{{ item.carPlate }}</text>
            </view>
          </view>
          <view class="card-content-box">
            <view class="content">
              <view class="item">
                <text class="label">
                  状态
                </text>
                <view class="value">
                  <view class="item-tag">
                    <up-tag :text="getDealStatusText(item.dealStatus)"
                      :type="getDealStatusType(item.dealStatus)"></up-tag>
                  </view>
                </view>
              </view>
              <view class="item">
                <text class="label">
                  场地名称：
                </text>
                <text class="value">
                  {{ item.veName || '-' }}
                </text>
              </view>
              <view class="item">
                <text class="label">
                  提交时间：
                </text>
                <text class="value">
                  {{ formatDate(item.submitTime) }}
                </text>
              </view>
              <view class="item" v-if="item.appealCount !== undefined">
                <text class="label">
                  申诉次数：
                </text>
                <text class="value">
                  {{ item.appealCount }}
                </text>
              </view>
              <view class="item">
                <text class="label">
                  泊位号：
                </text>
                <text class="value">
                  {{ item.berthCode || '-' }}
                </text>
              </view>
              <view class="item">
                <text class="label">
                  原订单金额：
                </text>
                <text class="value">
                  {{ formatAmount(item.orderAmount) }}
                </text>
              </view>
              <view class="item" v-if="item.currentAmount !== undefined">
                <text class="label">
                  当前订单金额：
                </text>
                <text class="value">
                  {{ formatAmount(item.currentAmount) }}
                </text>
              </view>
            </view>
            <view class="card-footer">
              <view class="checkbox-box">
              </view>
              <view class="operate">
                <up-button type="primary" text="申诉记录" plain class="custom-style" @click="handleEdit(item)"></up-button>
                <up-button type="primary" text="通过申诉" class="custom-style" @click="showPassModal(item)"
                  v-if="item.dealStatus === 0"></up-button>
                <up-button type="error" text="拒绝申诉" class="custom-style" @click="showRefuseModal(item)"
                  v-if="item.dealStatus === 0"></up-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>

    <OrderAppealModal v-model:show="show" :biz-code="currentBizCode" />
  </view>

  <!-- 通过申诉弹窗 -->
  <up-modal
    :show="showPass"
    title="通过申诉"
    :show-cancel-button="true"
    :closeOnClickOverlay="true"
    @confirm="submitPassAppeal"
    @cancel="showPass = false"
    @close="showPass = false"
  >
    <view class="modal-content" style="width: 100%;">
      <up-form>
        <up-form-item borderBottom label="车牌号">
          <view class="form-value">{{ stopRecordDetail.carPlate || '暂无' }}</view>
        </up-form-item>
        <up-form-item borderBottom label="泊位号">
          <view class="form-value">{{ stopRecordDetail.berthNo || '暂无' }}</view>
        </up-form-item>
        <up-form-item borderBottom label="原订单金额">
          <view class="form-value">{{ stopRecordDetail.money ? `¥${stopRecordDetail.money}` : '暂无' }}</view>
        </up-form-item>
        <up-form-item borderBottom label="现订单金额">
          <view class="form-value">{{ currentItem?.newMoney !== undefined ? `¥${currentItem.newMoney}` : '暂无' }}</view>
        </up-form-item>
        <up-form-item borderBottom label="进场时间">
          <up-datetime-picker
            v-model="passForm.entryTime"
            hasInput
            mode="datetime"
            placeholder="请选择进场时间"
            :inputProps="{
              border: 'surround',
              shape: 'square',
              inputAlign: 'center',
              suffixIcon: 'calendar'
            }"
            @confirm="handleEntryTimeConfirm"
          >
          </up-datetime-picker>
        </up-form-item>
        <up-form-item borderBottom label="出场时间">
          <up-datetime-picker
            v-model="passForm.exitTime"
            hasInput
            mode="datetime"
            placeholder="请选择出场时间"
            :inputProps="{
              border: 'surround',
              shape: 'square',
              inputAlign: 'center',
              suffixIcon: 'calendar'
            }"
            @confirm="handleExitTimeConfirm"
          />
        </up-form-item>
        <up-form-item label="备注">
          <up-textarea
            v-model="passForm.remark"
            placeholder="请输入备注信息"
            :maxlength="200"
          />
        </up-form-item>
      </up-form>
    </view>
  </up-modal>

  <!-- 拒绝申诉弹窗 -->
  <up-modal :show="showRefuse" title="拒绝申诉" :show-cancel-button="true" :closeOnClickOverlay="true" @confirm="handleRefuseConfirm"
    @cancel="showRefuse = false" @close="showRefuse = false">
    <view class="modal-content" style="width: 100%;">
      <up-form>
        <up-form-item label="拒绝理由">
          <up-textarea
            v-model="refuseForm.reason"
            placeholder="请输入拒绝理由"
            :maxlength="200"
          />
        </up-form-item>
      </up-form>
    </view>
  </up-modal>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { getOrderAppealList, getAVAList, agreeOrderAppeal, rejectOrderAppeal, getStopRecordByBizCode, updateTimeCountMoney } from '@/api';
import OrderAppealModal from './components/OrderAppealModal.vue'
import type { OrderAppealListParams, OrderAppealItem } from '@/api/types';

const { bool: show, setTrue: openModal } = useBoolean();
const type = ref('add')
const editingData = ref({})
const currentBizCode = ref('')

// 弹窗控制变量
const showPass = ref(false);
const showRefuse = ref(false);
const currentItem = ref(null);

// 通过申诉表单数据
const passForm = ref({
  entryTime: new Date().getTime(),
  exitTime: new Date().getTime(),
  remark: ''
});

// 拒绝申诉表单数据
const refuseForm = ref({
  reason: ''
});

// 停车记录详情数据
const stopRecordDetail = ref({
  recordId: '',
  inTime: '',
  carPlate: '',
  isPay: 0,
  money: '',
  berthNo: '',
  outTime: ''
});

// 选项卡数据  
const tabsList = [
  { name: '全部' },
  { name: '待处理' },
  { name: '已处理' },
];
const currentTab = ref(0);
const showPicker1 = ref(false);
const showPicker2 = ref(false);
const showPicker3 = ref(false);

// 搜索相关变量
const searchValue = ref(''); // 车牌号搜索值
const selectedArea = ref(''); // 选中的区域ID
const selectedVenue = ref(''); // 选中的场地ID
const selectedIsOwn = ref(0); // 是否本人处理，默认全部

const columns1 = reactive([[]]);
const columns2 = reactive([[]]);
const columns3 = reactive([['是', '否']]);

// 存储API返回的区域和停车场数据
const avaListData = ref({
  districts: [],
  venues: [],
  agents: []
});

// 获取区域和停车场数据
const fetchAVAList = async () => {
  try {
    const result = await getAVAList();
    if (result.success) {
      // 保存API返回的数据
      avaListData.value = result.data;

      // 设置区域数据
      const districtNames = result.data.districts.map(item => item.dName);
      columns1[0] = districtNames;

      // 设置停车场数据
      const venueNames = result.data.venues.map(item => item.veName);
      columns2[0] = venueNames;
    } else {
      uni.showToast({
        title: '获取数据失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('获取区域和停车场数据失败:', error);
    uni.showToast({
      title: '获取数据失败',
      icon: 'none'
    });
  }
};
// z-paging 组件引用
const paging = ref(null)

// 当前显示的列表数据
const currentList = ref([])

const handleAdd = () => {
  type.value = 'add'
  openModal()
}

const handleEdit = (item: any) => {
  currentBizCode.value = item.bizCode;
  openModal();
}

// 格式化时间为 yyyy-MM-dd HH:mm:ss
const formatDateTime = (timestamp: number) => {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 显示通过申诉弹窗
const showPassModal = async (item: any) => {
  currentItem.value = item;
  
  // 获取停车记录详情
  try {
    uni.showLoading({
      title: '加载中...'
    });
    
    const result = await getStopRecordByBizCode(item.bizCode);
    
    uni.hideLoading();
    
    if (result.success && result.data) {
      // 更新停车记录详情数据
      stopRecordDetail.value = {
        recordId: result.data.recordId || '',
        inTime: result.data.inTime || '',
        carPlate: result.data.carPlate || '',
        isPay: result.data.isPay || 0,
        money: result.data.money || '',
        berthNo: result.data.berthNo || '',
        outTime: result.data.outTime || ''
      };
      
      // 设置表单数据，使用停车记录的进出场时间
      const entryTime = result.data.inTime ? new Date(result.data.inTime).getTime() : new Date().getTime();
      const exitTime = result.data.outTime ? new Date(result.data.outTime).getTime() : new Date().getTime();
      
      passForm.value = {
        entryTime,
        exitTime,
        remark: ''
      };
      
      // 保存原始时间
      originalTimes.value = {
        entryTime,
        exitTime
      };
    } else {
      // 如果获取详情失败，使用申诉项的时间
      const entryTime = item.inTime ? new Date(item.inTime).getTime() : new Date().getTime();
      const exitTime = item.outTime ? new Date(item.outTime).getTime() : new Date().getTime();
      
      passForm.value = {
        entryTime,
        exitTime,
        remark: ''
      };
      
      // 保存原始时间
      originalTimes.value = {
        entryTime,
        exitTime
      };
      
      uni.showToast({
        title: result.msg || '获取停车记录详情失败',
        icon: 'none'
      });
    }
  } catch (error) {
    uni.hideLoading();
    
    // 如果API调用失败，使用申诉项的时间
    const entryTime = item.inTime ? new Date(item.inTime).getTime() : new Date().getTime();
    const exitTime = item.outTime ? new Date(item.outTime).getTime() : new Date().getTime();
    
    passForm.value = {
      entryTime,
      exitTime,
      remark: ''
    };
    
    // 保存原始时间
    originalTimes.value = {
      entryTime,
      exitTime
    };
    
    uni.showToast({
      title: '获取停车记录详情失败',
      icon: 'none'
    });
  }
  
  showPass.value = true;
}

// 申诉修改时间重新计费
const recalculateAmount = async () => {
  if (!currentItem.value || !passForm.value.entryTime || !passForm.value.exitTime) {
    return;
  }

  try {
    uni.showLoading({
      title: '重新计费中...'
    });

    const entryTime = new Date(passForm.value.entryTime).toISOString().slice(0, 19).replace('T', ' ');
    const exitTime = new Date(passForm.value.exitTime).toISOString().slice(0, 19).replace('T', ' ');

    const result = await updateTimeCountMoney({
      bizCode: currentItem.value.bizCode,
      inTime: entryTime,
      outTime: exitTime
    });

    uni.hideLoading();

    if (result.success) {
      // 更新停车记录详情数据
      stopRecordDetail.value = {
        recordId: result.data.recordId || '',
        inTime: result.data.inTime || '',
        carPlate: result.data.carPlate || '',
        isPay: result.data.isPay || 0,
        money: result.data.money || '',
        berthNo: result.data.berthNo || '',
        outTime: result.data.outTime || ''
      };

      // 更新当前申诉项的新金额
      if (currentItem.value) {
        currentItem.value.newMoney = result.data.newMoney;
      }

      // 更新原始时间，避免重复计费
      originalTimes.value = {
        entryTime: passForm.value.entryTime,
        exitTime: passForm.value.exitTime
      };

      uni.showToast({
        title: '重新计费成功',
        icon: 'success'
      });
    } else {
      uni.showToast({
        title: result.msg || '重新计费失败',
        icon: 'none'
      });
    }
  } catch (error) {
    uni.hideLoading();
    uni.showToast({
      title: '重新计费失败',
      icon: 'none'
    });
  }
};

// 保存原始时间，用于比较是否发生变化
const originalTimes = ref({
  entryTime: 0,
  exitTime: 0
});

// 进场时间选择确认事件
const handleEntryTimeConfirm = (value: any) => {
  const newEntryTime = value.value;
  // 检查时间是否真的发生了变化
  if (newEntryTime !== originalTimes.value.entryTime && passForm.value.exitTime) {
    checkAndRecalculate();
  }
};

// 出场时间选择确认事件
const handleExitTimeConfirm = (value: any) => {
  const newExitTime = value.value;
  // 检查时间是否真的发生了变化
  if (newExitTime !== originalTimes.value.exitTime && passForm.value.entryTime) {
    checkAndRecalculate();
  }
};

// 检查时间变化并重新计费
const checkAndRecalculate = () => {
  // 检查是否有时间发生变化
  const entryTimeChanged = passForm.value.entryTime !== originalTimes.value.entryTime;
  const exitTimeChanged = passForm.value.exitTime !== originalTimes.value.exitTime;
  
  if ((entryTimeChanged || exitTimeChanged) && passForm.value.entryTime && passForm.value.exitTime) {
    recalculateAmount();
  }
};

// 提交通过申诉
const submitPassAppeal = async () => {
  if (!currentItem.value) {
    uni.showToast({
      title: '申诉信息不存在',
      icon: 'none'
    });
    return;
  }
  
  try {
    // 显示加载提示
    uni.showLoading({
      title: '提交中...'
    });
    
    // 准备请求参数
    const params = {
      bizCode: currentItem.value.bizCode, // 申诉ID
      inTime: formatDateTime(passForm.value.entryTime), // 进场时间
      outTime: formatDateTime(passForm.value.exitTime), // 出场时间
      dealRemark: passForm.value.remark // 备注原因
    };
    
    // 调用接口
    const result = await agreeOrderAppeal(params);
    
    // 隐藏加载提示
    uni.hideLoading();
    
    if (result.success) {
      uni.showToast({
        title: '申诉已通过',
        icon: 'success'
      });
      
      // 关闭弹窗
      showPass.value = false;
      
      // 刷新列表
      if (paging.value) {
        paging.value.reload();
      }
    } else {
      uni.showToast({
        title: result.msg || '操作失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('通过申诉失败:', error);
    uni.hideLoading();
    uni.showToast({
      title: '操作失败，请重试',
      icon: 'none'
    });
  }
}

// 显示拒绝申诉弹窗
const showRefuseModal = (item: any) => {
  currentItem.value = item;
  showRefuse.value = true;
}

// 处理通过申诉确认
const handlePassConfirm = () => {
  if (currentItem.value) {
    // 表单验证
    if (!passForm.value.entryTime) {
      uni.showToast({
        title: '请选择进场时间',
        icon: 'none'
      });
      return;
    }
    if (!passForm.value.exitTime) {
      uni.showToast({
        title: '请选择出场时间',
        icon: 'none'
      });
      return;
    }
    
    // 检查出场时间是否晚于进场时间
    const entryTime = new Date(passForm.value.entryTime).getTime();
    const exitTime = new Date(passForm.value.exitTime).getTime();
    if (exitTime <= entryTime) {
      uni.showToast({
        title: '出场时间必须晚于进场时间',
        icon: 'none'
      });
      return;
    }
    
    // 调用通过申诉的API，传递表单数据
    console.log('通过申诉', {
      id: currentItem.value.id,
      entryTime: passForm.value.entryTime,
      exitTime: passForm.value.exitTime,
      remark: passForm.value.remark
    });
    
    uni.showToast({
      title: '申诉已通过',
      icon: 'success'
    });
    // 刷新列表
    paging.value.reload();
  }
  showPass.value = false;
}

// 处理拒绝申诉确认
const handleRefuseConfirm = async () => {
  if (currentItem.value) {
    // 验证拒绝理由是否填写
    if (!refuseForm.value.reason) {
      uni.showToast({
        title: '请输入拒绝理由',
        icon: 'none'
      });
      return;
    }
    
    // 显示加载提示
    uni.showLoading({
      title: '处理中...'
    });
    
    try {
      // 调用拒绝申诉的API
      const result = await rejectOrderAppeal({
        bizCode: currentItem.value.bizCode,
        dealRemark: refuseForm.value.reason
      });
      
      // 关闭加载提示
      uni.hideLoading();
      
      // 检查返回结果的success字段
      if (result.success) {
        // 显示成功提示
        uni.showToast({
          title: '已拒绝申诉',
          icon: 'success'
        });
        
        // 刷新列表
        paging.value.reload();
        
        // 关闭弹窗
        showRefuse.value = false;
      } else {
        // 显示错误提示，从msg字段获取错误信息
        uni.showToast({
          title: result.msg || '拒绝申诉失败',
          icon: 'none'
        });
      }
    } catch (error) {
      // 关闭加载提示
      uni.hideLoading();
      
      // 显示错误提示
      uni.showToast({
        title: error.message || '拒绝申诉失败',
        icon: 'none'
      });
    }
  } else {
    showRefuse.value = false;
  }
}

// 选项卡切换事件
const handleTabChange = (e) => {
  const newIndex = e.index;
  if (currentTab.value === newIndex) {
    return; // 如果是同一个tab，不需要重新加载
  }

  currentTab.value = newIndex;

  // 切换tab时重新加载数据
  if (paging.value) {
    paging.value.reload();
  }
};

// 处理返回点击事件
const handleBackClick = () => {
  uni.redirectTo({
    url: '/pages/home/index'
  })
}


// 获取申诉列表数据
const queryList = async (pageNo, pageSize) => {
  console.log(pageNo, pageSize, currentTab.value)

  const params: OrderAppealListParams = {
    pageNum: pageNo,
    pageSize,
    dealStatus: currentTab.value === 0 ? -1 : currentTab.value - 1, // 处理状态转换
    carPlate: searchValue.value, // 车牌号搜索
    veId: selectedVenue.value, // 选中的场地ID
    areaCodes: selectedArea.value, // 选中的区域ID
    isOwn: selectedIsOwn.value // 是否本人处理
  }

  await fetchList(params)
};

// 格式化日期显示
const formatDate = (dateString) => {
  if (!dateString) return '-';
  try {
    const date = new Date(dateString);
    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
  } catch (e) {
    return dateString;
  }
};

// 格式化金额显示
const formatAmount = (amount) => {
  if (amount === undefined || amount === null) return '-';
  return `${amount}元`;
};

// 获取处理状态文本
const getDealStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '已通过',
    2: '已拒绝'
  };
  return statusMap[status] || '未知状态';
};

// 获取处理状态标签类型
const getDealStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'success',
    2: 'error'
  };
  return typeMap[status] || 'info';
};

const fetchList = async (params: OrderAppealListParams) => {
  try {
    const result: any = await getOrderAppealList(params)
    if (result.success) {
      const data = result.data
      paging.value.complete(data.records || [])
    } else {
      uni.showToast({
        title: result.msg || '获取数据失败',
        icon: 'none'
      })
      paging.value.complete(false)
    }
  } catch (error) {
    console.error('获取申诉列表失败:', error)
    paging.value.complete(false)
  }
}


// 区域选择确认
const handleAreaConfirm = (e) => {
  const { value, index } = e;
  const areaName = value[0];
  // 根据名称找到对应的区域ID
  const area = avaListData.value.districts.find(item => item.dName === areaName);
  if (area) {
    selectedArea.value = area.did;
  }
  showPicker1.value = false;
  // 重新加载数据
  if (paging.value) {
    paging.value.reload();
  }
};

// 场地选择确认
const handleVenueConfirm = (e) => {
  const { value, index } = e;
  const venueName = value[0];
  // 根据名称找到对应的场地ID
  const venue = avaListData.value.venues.find(item => item.veName === venueName);
  if (venue) {
    selectedVenue.value = venue.veId;
  }
  showPicker2.value = false;
  // 重新加载数据
  if (paging.value) {
    paging.value.reload();
  }
};

// 是否本人处理选择确认
const handleIsOwnConfirm = (e) => {
  const { value, index } = e;
  selectedIsOwn.value = value[0] === '是' ? 1 : 0;
  showPicker3.value = false;
  // 重新加载数据
  if (paging.value) {
    paging.value.reload();
  }
};

// 搜索按钮点击事件
const handleSearch = () => {
  // 重新加载数据
  if (paging.value) {
    paging.value.reload();
  }
};

// 查看详情
const handleView = (row: any) => {
  // 跳转到详情页逻辑
  console.log('查看详情:', row);
};

// 审核操作
const handleVerify = (row: any) => {
  // 跳转到审核页逻辑
  console.log('审核操作:', row);
};

// 页面挂载时获取数据
onMounted(() => {
  // 获取列表数据
  fetchList({
    pageNum: 1,
    pageSize: 10,
  });

  // 获取区域和停车场数据
  fetchAVAList();
});
</script>

<style scoped lang="scss">
.vehicle-verify-list {
  padding: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 20rpx 30rpx;

  &-item {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;

    .item-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }

    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-right: 10rpx;
    }

    .arrow-icon {
      width: 30rpx;
      height: 30rpx;
    }
  }

  .waiting-count {
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
    display: flex;
    align-items: center;

    text {
      font-weight: bold;
      font-size: 36rpx;
      color: #fe6000;
      margin-left: 10rpx;
    }
  }
}

/* 列表统计 */
.list-statistics {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}

.list-statistics .item {
  flex: 1 1 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.list-statistics .label {
  font-size: 14px;
  color: #666;
}

/* 表单只读值样式 */
.form-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  padding: 10rpx 0;
}

.list-statistics .value {
  font-size: 18px;
  font-weight: bold;
  color: #e9710f;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>